<template>
  <div class="cart-action-bar">
    <!-- 顶部标签页 -->
    <div class="tab-container">
      <div class="tab-item active">
        <span class="tab-icon">
          <i class="el-icon-shopping-cart-full"></i>
        </span>
        全部商品({{ totalCount }})
      </div>
      <!-- <div class="tab-item">
        <span class="tab-icon">
          <i class="el-icon-star-off"></i>
        </span>
        消费券
      </div>
      <div class="tab-item">
        <span class="tab-icon">
          <i class="el-icon-discount"></i>
        </span>
        官方立减
      </div>
      <div class="tab-item">
        <span class="tab-icon">
          <i class="el-icon-shopping-bag-1"></i>
        </span>
        超级立减
      </div>
      <div class="tab-item">
        <span class="tab-icon">
          <i class="el-icon-price-tag"></i>
        </span>
        降价
      </div> -->
    </div>
    
    <!-- 操作栏 -->
    <div class="action-container">
      <!-- 左侧操作区域 -->
      <div class="action-left">
        <el-checkbox 
          :model-value="allChecked" 
          @change="$emit('toggle-all', $event)"
          class="select-all"
        >
          全选
        </el-checkbox>
        
        <div class="action-buttons">
          <el-button 
            size="small" 
            :disabled="selectedCount === 0"
            @click="$emit('move-to-favorite')"
            class="action-btn"
          >
            移入收藏
          </el-button>
          
          <el-button 
            size="small" 
            type="danger" 
            plain
            :disabled="selectedCount === 0"
            @click="$emit('delete-selected')"
            class="action-btn delete-btn"
          >
            删除
          </el-button>
        </div>
      </div>
      
      <!-- 右侧搜索区域 -->
      <div class="action-right">
        <div class="search-container">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索购物车内商品"
            size="small"
            class="search-input"
            @keyup.enter="handleSearch"
            clearable
            @clear="handleSearch"
          >
            <template #prefix>
              <el-icon class="search-btn" @click="handleSearch"><Search /></el-icon>
            </template>
          </el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

defineProps<{
  allChecked: boolean
  selectedCount: number
  totalCount: number // 购物车商品总数（从API获取）
}>()
//
const emits = defineEmits<{
  (e: 'toggle-all', checked: boolean): void
  (e: 'move-to-favorite'): void
  (e: 'delete-selected'): void
  (e: 'search', keyword: string): void
}>()

const searchKeyword = ref('')

const handleSearch = async() => {
  const keyword = searchKeyword.value.trim()
  console.log('搜索关键词:', keyword)
  
  // 调用搜索API获取结果
  emits('search', keyword)
}
</script>

<style scoped lang="scss">
.cart-action-bar {
  background: transparent;
  margin-bottom: 0.25rem;
  overflow: hidden;
}

.tab-container {
  display: flex;
  border-bottom: 1px solid #f0f0f0;
  padding: 0 0.75rem;
  background: transparent;
  
  .tab-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    color: #333;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.3s ease;
    
    &:hover {
      color: #ff6a00; // 改为 #ff6a00
    }
    
    &.active {
      color: #ff6a00; // 改为 #ff6a00
      font-weight: 500;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: #ff6a00; // 改为 #ff6a00
      }
    }
    
    .tab-icon {
      font-size: 0.875rem;
    }
  }
}

.action-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #f0f0f0;
  background: transparent;
}

.action-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  
  .select-all {
    :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
      background-color: #ff6a00; // 改为 #ff6a00
      border-color: #ff6a00;
    }
  }
  
  .action-buttons {
    display: flex;
    gap: 0.5rem;
    
    .action-btn {
      border-color: #ddd;
      color: #666;
      font-size: 0.7rem;
      height: 1.5rem;
      padding: 0 0.5rem;
      border-radius: 0.25rem;
      transition: all 0.3s ease;
      
      &:hover:not(:disabled) {
        border-color: #ff6a00; // 改为 #ff6a00
        color: #ff6a00;
        transform: translateY(-1px);
        box-shadow: 0 1px 3px rgba(255, 106, 0, 0.1);
      }
      
      &:disabled {
        border-color: #f0f0f0;
        color: #ccc;
      }
      
      &.delete-btn {
        color: #ff6a00; // 改为 #ff6a00
        border-color: #ff6a00;
        
        &:hover:not(:disabled) {
          background-color: #fff8f0;
        }
      }
    }
  }
}

.action-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  
  
  .search-container {
    .search-input {
      width: 10rem;
      
      :deep(.el-input__wrapper) {
        border-color: #ddd;
        border-radius: 0.25rem;
        height: 1.5rem;
        transition: all 0.3s ease;
        
        &:hover {
          border-color: #ff6a00; // 改为 #ff6a00
        }
        
        &.is-focus {
          border-color: #ff6a00; // 改为 #ff6a00
          box-shadow: 0 0 0 1px rgba(255, 106, 0, 0.1);
        }
      }
      
      :deep(.el-input__inner) {
        font-size: 0.7rem;
      }
      .search-btn{
        cursor: pointer;
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 64rem) {
  .cart-action-bar {
    border-radius: 0.25rem;
  }
}

@media (max-width: 48rem) {
  .tab-container {
    overflow-x: auto;
    white-space: nowrap;
    padding: 0 0.5rem;
    
    .tab-item {
      padding: 0.5rem 0.75rem;
      font-size: 0.75rem;
    }
  }
  
  .action-container {
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
  }
  
  .action-left {
    width: 100%;
    justify-content: space-between;
  }
  
  .action-right {
    width: 100%;
    
    .search-container .search-input {
      width: 100%;
    }
  }
}
</style>
